<template>
  <el-table :data="userList" style="width: 100%" row-key="id" border>
    <el-table-column type="expand" align="center" label="#" width="50">
      <template slot-scope="slot">
        <role-table :id="slot.row.id" />
      </template>
    </el-table-column>

    <el-table-column prop="username" align="center" label="用户名" width="180"></el-table-column>

    <el-table-column align="center" prop="email" label="邮箱" width="180"></el-table-column>

    <el-table-column align="center" prop="phoneNum" label="手机号码" width="180"></el-table-column>

    <el-table-column align="center" prop="status" label="激活状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.status === 1">激活</el-tag>
        <el-tag v-else type="warning">未激活</el-tag>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作😀" align="center" width="200px">
      <template slot-scope="scope">
        <div>
          <el-button-com
            icon="el-icon-edit"
            btnType="primary"
            size="mini"
            @click.native="updUser(scope.row.id)"
          />
          <el-button-com
            icon="el-icon-delete"
            btnType="danger"
            size="mini"
            @click.native="isdDelUser(scope.row.id)"
          />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 组件
import RoleTable from '@/views/Main/User/RoleTable.vue'
import ElButtonCom from '@/components/common/ElButtonCom'

// 请求
import { delUser } from '@/network/homeRequest.js'

export default {
  props: {
    userList: Array
  },
  components: {
    RoleTable,
    ElButtonCom
  },
  methods: {
    /**
     * 是否删除用户
     */
    async isdDelUser(id) {
      const res = await this.$confirm('删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).catch(e => this.$message(e + ':删除操作取消'))
      if (res == 'confirm') {
        this.delUserNetWork(id)
      }
      return
    },

    /**
     * 删除用户请求
     */
    async delUserNetWork(oid) {
      const { meta } = await delUser(oid)
      // 失败
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }
      // 成功 重新请求所有user
      this.$bus.$emit('getUserList')
      return
    },

    /**
     * 更新用户
     */
    async updUser(uid) {
      this.$bus.$emit('openUserUpdDialog', uid);
    }
  }
}
</script>

